<template>
  <div>
    <el-dialog title="添加组织" :visible.sync="dialogVisible1" width="30%" :close-on-click-modal="false">
      <el-form ref="dataForm1" :rules="modelRules" :model="model1" label-width="130px">
        <el-form-item label="组织名称" prop="displayName">
          <el-input v-model="model1.displayName" v-focus placeholder="组织名称"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close()">取消</el-button>
        <el-button type="primary" :loading="isSubmitLoading1" @click="create()">提交</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑组织" :visible.sync="dialogVisible2" width="30%" :close-on-click-modal="false">
      <el-form ref="dataForm2" :rules="modelRules" :model="model2" label-width="130px">
        <el-form-item label="组织名称" prop="displayName">
          <el-input v-model="model2.displayName" v-focus placeholder="组织名称"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close()">取消</el-button>
        <el-button type="primary" :loading="isSubmitLoading2" @click="update()">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getOrganizationUnit, createOrganizationUnit, updateOrganizationUnit } from "@/api/organization-unit";

export default {
  directives: {
    focus: {
      inserted: function(el) {
        el.querySelector("input").focus();
      },
      update: function(el) {
        el.querySelector("input").focus();
      }
    }
  },
  data() {
    return {
      dialogVisible1: false,
      isSubmitLoading1: false,
      model1: {
        parentId: undefined,
        displayName: ""
      },
      dialogVisible2: false,
      isSubmitLoading2: false,
      model2: {
        id: undefined,
        displayName: ""
      },
      modelRules: {
        displayName: [{ required: true, trigger: "blur", message: "请输入组织名称" }]
      }
    };
  },
  methods: {
    show(id, parentId) {
      this.resetModal();
      this.isSubmitLoading1 = false;
      this.isSubmitLoading2 = false;
      if (id) {
        getOrganizationUnit(id).then(result => {
          this.model2 = result;
          this.dialogVisible2 = true;
          this.$nextTick(() => {
            this.$refs["dataForm2"].clearValidate();
          });
        });
      } else {
        this.model1.parentId = parentId;
        this.dialogVisible1 = true;
        this.$nextTick(() => {
          this.$refs["dataForm1"].clearValidate();
        });
      }
    },
    resetModal() {
      this.model1 = {
        parentId: undefined,
        displayName: ""
      };
      this.model2 = {
        id: undefined,
        displayName: ""
      };
    },
    create() {
      this.isSubmitLoading1 = true;
      this.$refs["dataForm1"].validate(valid => {
        if (valid) {
          createOrganizationUnit(this.model1)
            .then(() => {
              this.$message({ message: "添加成功", type: "success" });
              this.isSubmitLoading1 = false; // 无论成功失败，都把按钮的loading状态取消
              this.close();
              this.$emit("save");
            })
            .catch(() => {
              this.isSubmitLoading1 = false; // 无论成功失败，都把按钮的loading状态取消
            });
        } else {
          this.isSubmitLoading1 = false;
          this.$message({ message: this.$t("formIsNotValidMessage"), type: "warning" });
        }
      });
    },
    update() {
      this.isSubmitLoading2 = true;
      this.$refs["dataForm2"].validate(valid => {
        if (valid) {
          updateOrganizationUnit(this.model2)
            .then(() => {
              this.$message({ message: "编辑成功", type: "success" });
              this.isSubmitLoading2 = false; // 无论成功失败，都把按钮的loading状态取消
              this.close();
              this.$emit("save");
            })
            .catch(() => {
              this.isSubmitLoading2 = false; // 无论成功失败，都把按钮的loading状态取消
            });
        } else {
          this.isSubmitLoading2 = false;
          this.$message({ message: this.$t("formIsNotValidMessage"), type: "warning" });
        }
      });
    },
    close() {
      this.dialogVisible1 = false;
      this.isSubmitLoading1 = false; // 无论成功失败，都把按钮的loading状态取消
      this.dialogVisible2 = false;
      this.isSubmitLoading2 = false; // 无论成功失败，都把按钮的loading状态取消
    }
  }
};
</script>
